<template>
  <view class="container">
    <uni-nav-bar
      fixed
      :border="false"
      statusBar
      title="送洗"
      color="#1F1F1F"
      left-icon="left"
      right-icon="home-filled"
      @clickLeft="onBack"
      @clickRight="onHome"
    >
    </uni-nav-bar>
    <view class="mainBox">
      <uni-collapse ref="collapse" @change="onChange">
        <uni-collapse-item
          titleBorder="none"
          :open="true"
          :class="{
            open: collapse.indexOf('0') !== -1,
          }"
        >
          <template v-slot:title>
            <view class="section">
              <view class="l">
                <img
                  :src="formData.urlPublic || '/static/common/avatar01.png'"
                />
              </view>
              <view class="r">
                <view class="main">
                  <view class="name"
                    >{{ formData.personnelName }} {{ formData.clothCode }}</view
                  >
                  <view class="state" v-if="formData.state == 1">已送衣</view>
                </view>
                <view class="minor">部门：{{ formData.deptName }}</view>
                <view class="minor">电话：{{ formData.phone }}</view>
              </view>
            </view>
          </template>
          <view class="formBox">
            <uni-forms
              ref="valiForm"
              :rules="rules"
              v-model="formData"
              label-position="top"
              label-width="150"
            >
              <uni-row :gutter="24">
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/shangyi.png" />
                  <uni-forms-item label="上衣" required name="lcslSy">
                    <uni-number-box
                      :disabled="formData.state == 1"
                      v-model="formData.lcslSy"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/xiayi.png" />
                  <uni-forms-item label="裤子" required name="lcslKz">
                    <uni-number-box
                      :disabled="formData.state == 1"
                      v-model="formData.lcslKz"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/qiuyi.png" />
                  <uni-forms-item label="秋衣" required name="lcslQy">
                    <uni-number-box
                      :disabled="formData.state == 1"
                      v-model="formData.lcslQy"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/qiuku.png" />
                  <uni-forms-item label="秋裤" required name="lcslQk">
                    <uni-number-box
                      :disabled="formData.state == 1"
                      v-model="formData.lcslQk"
                    />
                  </uni-forms-item>
                </uni-col>

                <uni-col :span="12" :lg="6">
                  <img src="/static/image/rongyi.png" />
                  <uni-forms-item label="绒衣" required name="lcslRy">
                    <uni-number-box
                      :disabled="formData.state == 1"
                      v-model="formData.lcslRy"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/rongku.png" />
                  <uni-forms-item label="绒裤" required name="lcslRk">
                    <uni-number-box
                      :disabled="formData.state == 1"
                      v-model="formData.lcslRk"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/mianyi.png" />
                  <uni-forms-item label="棉衣" required name="lcslMy">
                    <uni-number-box
                      :disabled="formData.state == 1"
                      v-model="formData.lcslMy"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/mianku.png" />
                  <uni-forms-item label="棉裤" required name="lcslMk">
                    <uni-number-box
                      :disabled="formData.state == 1"
                      v-model="formData.lcslMk"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="24" :lg="6">
                  <img src="/static/image/majia.png" />
                  <uni-forms-item label="马甲" required name="lcslMj">
                    <uni-number-box
                      :disabled="formData.state == 1"
                      v-model="formData.lcslMj"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/fbyifu.png" />
                  <uni-forms-item label="缝补衣服" name="fbyfArr">
                    <uni-data-checkbox
                      multiple
                      v-model="formData.fbyfArr"
                      :localdata="fbyfData"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/fbkouzi.png" />
                  <uni-forms-item label="缝补扣子" name="fbkzArr">
                    <uni-data-checkbox
                      multiple
                      v-model="formData.fbkzArr"
                      :localdata="fbkzData"
                    />
                  </uni-forms-item>
                </uni-col>
              </uni-row>
            </uni-forms>
            <button
              class="btn"
              type="primary"
              @click="onSubmit(formData, 1)"
              v-if="formData.state !== 1"
            >
              提交
            </button>
          </view>
        </uni-collapse-item>

        <uni-collapse-item
          titleBorder="none"
          v-for="(item, i) in instead"
          :key="i"
          :class="{
            open: collapse.indexOf((i + 1).toString()) !== -1,
          }"
        >
          <template v-slot:title>
            <view class="section">
              <view class="l">
                <img :src="item.urlPublic || '/static/common/avatar01.png'" />
              </view>
              <view class="r">
                <view class="main">
                  <view class="name"
                    >{{ item.personnelName }} {{ item.clothCode }}</view
                  >
                  <view class="state" v-if="item.state == 1">已送衣</view>
                </view>
                <view class="minor">部门：{{ item.deptName }}</view>
                <view class="minor">电话：{{ item.phone }}</view>
              </view>
            </view>
          </template>
          <view class="formBox">
            <uni-forms
              :ref="`valiForm${i}`"
              label-position="top"
              :rules="rules"
              label-width="150"
            >
              <uni-row>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/shangyi.png" />
                  <uni-forms-item label="上衣" required name="lcslSy">
                    <uni-number-box
                      :disabled="item.state == 1"
                      v-model="item.lcslSy"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/xiayi.png" />
                  <uni-forms-item label="裤子" required name="lcslKz">
                    <uni-number-box
                      :disabled="item.state == 1"
                      v-model="item.lcslKz"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/qiuyi.png" />
                  <uni-forms-item label="秋衣" required name="lcslQy">
                    <uni-number-box
                      :disabled="item.state == 1"
                      v-model="item.lcslQy"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/qiuku.png" />
                  <uni-forms-item label="秋裤" required name="lcslQk">
                    <uni-number-box
                      :disabled="item.state == 1"
                      v-model="item.lcslQk"
                    />
                  </uni-forms-item>
                </uni-col>

                <uni-col :span="12" :lg="6">
                  <img src="/static/image/rongyi.png" />
                  <uni-forms-item label="绒衣" required name="lcslRy">
                    <uni-number-box
                      :disabled="item.state == 1"
                      v-model="item.lcslRy"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/rongku.png" />
                  <uni-forms-item label="绒裤" required name="lcslRk">
                    <uni-number-box
                      :disabled="item.state == 1"
                      v-model="item.lcslRk"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/mianyi.png" />
                  <uni-forms-item label="棉衣" required name="lcslMy">
                    <uni-number-box
                      :disabled="item.state == 1"
                      v-model="item.lcslMy"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/mianku.png" />
                  <uni-forms-item label="棉裤" required name="lcslMk">
                    <uni-number-box
                      :disabled="item.state == 1"
                      v-model="item.lcslMk"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="24" :lg="6">
                  <img src="/static/image/majia.png" />
                  <uni-forms-item label="马甲" required name="lcslMj">
                    <uni-number-box
                      :disabled="item.state == 1"
                      v-model="item.lcslMj"
                    />
                  </uni-forms-item>
                </uni-col>

                <uni-col :span="12" :lg="6">
                  <img src="/static/image/fbyifu.png" />
                  <uni-forms-item label="缝补衣服" name="fbyfArr">
                    <uni-data-checkbox
                      multiple
                      v-model="item.fbyfArr"
                      :localdata="fbyfData"
                    />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="12" :lg="6">
                  <img src="/static/image/fbkouzi.png" />
                  <uni-forms-item label="缝补扣子" name="fbkzArr">
                    <uni-data-checkbox
                      multiple
                      v-model="item.fbkzArr"
                      :localdata="fbkzData"
                    />
                  </uni-forms-item>
                </uni-col>
              </uni-row>
            </uni-forms>
            <button
              class="btn"
              type="primary"
              @click="onSubmit(item, 2)"
              v-if="item.state !== 1"
            >
              提交
            </button>
          </view>
        </uni-collapse-item>
      </uni-collapse>
      <button class="addBtn" @click="onAdd">添加代送</button>
    </view>

    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        mode="input"
        title="输入编号"
        placeholder="请输入"
        :before-close="true"
        @close="$refs.inputDialog.close()"
        @confirm="onConfirm"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import _ from 'lodash';
import { getClothWithCode, netLaundrySend } from '@/api/laundry';
export default {
  components: {},
  data() {
    return {
      init: {
        lcslSy: 0,
        lcslKz: 0,
        lcslQy: 0,
        lcslQk: 0,
        lcslRy: 0,
        lcslRk: 0,
        lcslMy: 0,
        lcslMk: 0,
        lcslMj: 0,
        fbyfArr: [],
        fbkzArr: [],
      },
      collapse: ['0'],
      // 代替数据
      instead: [],
      // 表单数据
      formData: {},
      // 规则
      rules: {
        lcslSy: {
          rules: [
            {
              required: true,
              errorMessage: '请填写内容',
            },
          ],
        },
      },
      fbyfData: [
        {
          text: '上衣',
          label: '上衣',
          value: '1',
        },
        {
          text: '裤子',
          label: '裤子',
          value: '2',
        },
      ],
      fbkzData: [
        {
          text: '上衣',
          label: '上衣',
          value: '1',
        },
        {
          text: '裤子',
          label: '裤子',
          value: '2',
        },
      ],
    };
  },
  watch: {
    'formData.userId': {
      handler(newVal) {},
      immediate: false,
      deep: true,
    },
  },
  onLoad(query) {
    this.query = query;
    this.formData = {
      ...this.init,
    };
    this.getData();
  },
  methods: {
    isSubmit(data) {
      let arr = Object.keys(this.init).slice(0, 9);
      let total = 0;
      arr.forEach((v) => {
        total += data[v];
      });
      return total == 0;
    },
    getData() {
      getClothWithCode({
        clothCode: this.query.clothCode,
      }).then((res) => {
        this.formData = {
          ...res.data,
          ...this.init,
        };
      });
    },
    // collapse
    onChange(e) {
      this.collapse = e;
    },
    // 增加代领
    onAdd() {
      this.$refs.inputDialog.open();
    },
    onConfirm(v) {
      if (!v) {
        uni.showToast({
          icon: 'none',
          title: '请输入内容',
        });
        return;
      }
      if (v === this.query.clothCode) {
        uni.showToast({
          icon: 'none',
          title: '代送不能选择自己',
        });
        return;
      }
      getClothWithCode({
        clothCode: v,
      }).then((res) => {
        this.$refs.inputDialog.close();
        this.instead.push({
          ...res.data,
          state: 0,
          ...this.init,
        });
      });
    },
    // 提交
    onSubmit(r, t) {
      if (this.isSubmit(r)) {
        uni.showToast({
          icon: 'none',
          title: '请先添加衣物！',
        });
        return;
      }
      let params = {
        clothCode: r.clothCode,
        sendSy: r.lcslSy,
        sendKz: r.lcslKz,
        sendQy: r.lcslQy,
        sendQk: r.lcslQk,
        sendRy: r.lcslRy,
        sendRk: r.lcslRk,
        sendMy: r.lcslMy,
        sendMk: r.lcslMk,
        sendMj: r.lcslMj,
        fbyfArr: r.fbyfArr,
        fbkzArr: r.fbkzArr,
        sendType: t,
      };
      if (t == 2) {
        params.sendPersonnel = this.query.clothCode;
      }
      uni.showLoading({ title: '操作中' });
      netLaundrySend(params).then((res) => {
        r.state = 1;
        uni.hideLoading();
        uni.showToast({
          title: `提交成功`,
        });
      });
    },
    // 重置表单
    onReset() {
      this.formData = this.$options.data().formData;
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
    onHome() {
      uni.reLaunch({
        url: '/pages/laundry/formIndex',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-top));
  background: #f8fbff;
  position: relative;
  display: flex;
  flex-direction: column;
  ::v-deep .uni-collapse {
    background: transparent;
    .uni-collapse-item {
      border-radius: 4rpx;
      margin-bottom: 30rpx;
      border-radius: 15rpx 15rpx 15rpx 15rpx;
      background: linear-gradient(231deg, #3881ff 0%, #7da8ff 100%);
      padding: 10rpx;
      .uni-collapse-item__wrap {
        background: linear-gradient(180deg, #deebff 0%, #f3f8ff 100%);
        border-radius: 15rpx 15rpx 15rpx 15rpx;
      }
    }
  }
  .mainBox {
    padding: 20rpx;
    overflow: hidden;
    .section {
      padding: 35rpx 15rpx 35rpx 40rpx;
      display: flex;
      .l {
        width: 132rpx;
        height: 132rpx;
        margin-right: 24rpx;
        img {
          display: inline-block;
          width: 100%;
          height: 100%;
          border-radius: 4rpx;
          background: #c6cfde;
        }
      }
      .r {
        flex: 1;
        .main {
          padding-bottom: 12rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .name {
            font-family: Segoe UI;
            font-weight: bold;
            font-size: 35rpx;
            color: #fff;
          }
          .state {
            color: #fff;
            line-height: 1;
            padding: 10rpx 25rpx;
            background: #078bff;
            border-radius: 4rpx;
          }
        }
        .minor {
          font-weight: 400;
          font-size: 22rpx;
          color: #eee;
        }
      }
    }
    .formBox {
      padding: 40rpx 20rpx;
      ::v-deep .checklist-box {
        margin-right: 5px !important;
      }
      .btn {
        max-width: 375px;
        margin-top: 10rpx;
        background: linear-gradient(231deg, #0062ff 0%, #4777fb 100%);
        box-shadow: 0rpx 7rpx 11rpx 1rpx rgba(51, 112, 201, 0.3);
        border-radius: 3rpx 3rpx 3rpx 3rpx;
      }
      .uni-col {
        display: flex;
        align-items: center;
        img {
          display: inline-block;
          width: 118.06rpx;
          height: 83.33rpx;
          margin-right: 10rpx;
        }
        .uni-forms-item {
          margin-bottom: 0;
          ::v-deep .uni-forms-item__label {
            color: #000;
            // font-size: 28rpx;
          }
          ::v-deep .uni-numbox--text {
            // font-size: 30rpx;
            color: #078bff !important;
            &.uni-numbox--disabled {
              color: #c0c0c0 !important;
            }
          }
          // ::v-deep .uni-numbox__value {
          //   font-size: 25rpx;
          // }
        }
      }
    }
    .addBtn {
      color: cadetblue;
      border: 1rpx solid #8bc9ff;
      background: #eef5ff;
    }
    .open {
      :deep(.uni-collapse-item__wrap) {
        height: auto !important;
      }
    }
  }
}
</style>
